import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:untitled9/page.dart';

class SignInPage extends StatefulWidget {
  const SignInPage({super.key});

  @override
  State<SignInPage> createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {
  @override
  Widget build(BuildContext context) {
    double scrW = MediaQuery.of(context).size.width;
    double scrH = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Color.fromRGBO(195, 161, 162, 1.0),
        title: Center(
            child: Text(
          'Sign in',
          style: TextStyle(color: Colors.white),
        )),
      ),
      body: Container(
        width: scrW,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.symmetric(vertical: 50),
              width: 100,
              height: 100,
              child: Center(
                child: Text('LOGO'),
              ),
              decoration: BoxDecoration(
                  border: Border.all(width: 2, color: Colors.blue)),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('    Username'),
                Container(
                  width: scrW - 100,
                  height: 50,
                  decoration: BoxDecoration(
                      border: Border.all(width: 1, color: Colors.grey),
                      borderRadius: BorderRadius.circular(50)),
                  child: Row(
                    children: [
                      Container(
                        margin: EdgeInsets.symmetric(horizontal: 15),
                        width: 25,
                        height: 25,
                        child: Center(
                            child: Text(
                          'LOGO',
                          style: TextStyle(fontSize: 8),
                        )),
                        decoration: BoxDecoration(
                            border: Border.all(width: 1, color: Colors.grey)),
                      ),
                      Expanded(
                        child: Container(
                            width: 50,
                            child: TextField(
                              cursorColor: Colors.black,
                              inputFormatters: [
                                LengthLimitingTextInputFormatter(8),
                              ],
                              decoration:
                                  InputDecoration(border: InputBorder.none),
                            )),
                      )
                    ],
                  ),
                )
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('    Password'),
                Container(
                  width: scrW - 100,
                  height: 50,
                  decoration: BoxDecoration(
                      border: Border.all(width: 1, color: Colors.grey),
                      borderRadius: BorderRadius.circular(50)),
                  child: Row(
                    children: [
                      Container(
                        margin: EdgeInsets.symmetric(horizontal: 15),
                        width: 25,
                        height: 25,
                        decoration: BoxDecoration(
                            border: Border.all(width: 1, color: Colors.grey)),
                        child: Center(
                            child: Text(
                          'LOGO',
                          style: TextStyle(fontSize: 8),
                        )),
                      ),
                      Expanded(
                        child: Container(
                            width: 50,
                            child: Center(
                              child: TextField(
                                cursorColor: Colors.black,
                                obscureText: true,
                                inputFormatters: [
                                  LengthLimitingTextInputFormatter(8),
                                ],
                                decoration:
                                    InputDecoration(border: InputBorder.none),
                              ),
                            )),
                      ),
                      Container(
                        margin: EdgeInsets.symmetric(horizontal: 10),
                        width: 20,
                        height: 20,
                        child: Center(
                            child: Text(
                          'LOGO',
                          style: TextStyle(fontSize: 8),
                        )),
                        decoration: BoxDecoration(
                            border: Border.all(width: 1, color: Colors.grey)),
                      )
                    ],
                  ),
                )
              ],
            ),
            Container(
              margin: EdgeInsets.only(right: 65),
              alignment: Alignment.topRight,
              child: Text('Forgot Password?'),
            ),
            SizedBox(
              height: 80,
            ),
            Container(
              width: scrW - 100,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) {
                        return Page1();
                      }));
                    },
                    child: Container(
                      width: 140,
                      height: 50,
                      child: Center(
                        child: Text(
                          'Sign in',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25),
                          border: Border.all(width: 1, color: Colors.grey)),
                    ),
                  ),
                  Container(
                    width: 140,
                    height: 50,
                    child: Center(
                      child: Text(
                        'Sign up',
                        style: TextStyle(fontSize: 20),
                      ),
                    ),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                        border: Border.all(width: 1, color: Colors.grey)),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
